<template>
    <div class="selection-container">
        <el-select
            v-model="selectedValue"
            placeholder="Select Cluster"
            size="large"
            style="width: 240px"
            @change="handleSelectChange"
        >
            <el-option
                v-for="item in clusterOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
        </el-select>
    </div>
    <iframe ref="iframe" :src="selectedValue" style="border: none; width: 100%; height: 75vh;"></iframe>
</template>

<script lang="ts" setup name="Cluster">
    import { ElMessage } from 'element-plus';
    import { onBeforeMount, ref, reactive, onMounted } from 'vue';
    import { post } from '@/axios/api';

    let selectedValue: any = ref('')
    const props = defineProps(['gse', 'experimentType', 'sampleType'])
    const staticURL = import.meta.env.VITE_MEDIA_URL as string

    let clusterOptions: any = ref([])
    const iframeRef = ref<HTMLIFrameElement | null>(null);


    function handleSelectChange(val:any) {
        if (iframeRef.value) {
            iframeRef.value.src = val;
        }
    }

    async function getClusters() {
        const res:any = await post('/get_clusters/', {
            gse: props.gse,
            experimentType: props.experimentType,
            sampleType: props.sampleType
        })
        if (res.options.length > 0) {
            clusterOptions.value = res.options.map((ele:any) => {
                return {
                    label: ele.label,
                    value: staticURL + ele.value
                }
            })
            console.log(clusterOptions.value)
            selectedValue.value = clusterOptions.value[0].value
        } else {
            selectedValue.value = ''
            ElMessage({
                message: 'Cluster does not exist',
                type: 'error',
            })
        }
    }

    onMounted(() => {
        try {
            getClusters()
        } catch (err) {
            ElMessage({
                message: 'Failed to load clusters',
                type: 'error',
            })
        }
    })

</script>

<style scoped>
    .selection-container {
        float: right;
    }
</style>